<template>
  <!--  <echart-wrap ref="echarts" :options="option"></echart-wrap>-->
  <div>
    <condition-chart
      @chat-init="initChart"
      :options="opt"
      style="height: 80vh"
    ></condition-chart>
    <button @click="assembleOption">生成数据</button>
  </div>
</template>

<script>
import ConditionChart from "@/components/conditionChart.vue";
import * as echarts from "echarts";
import moment from "moment/moment";
import {
  conditionList,
  fakeData,
  getNewSeriesItem,
  getRandomInt
} from "@/pages/ConditionChartConst";

export default {
  components: { ConditionChart },
  data() {
    return {
      opt: {}
    };
  },
  methods: {
    initChart(chart) {
      console.log(chart);
    },
    init() {
      var today = new Date();
      // 将今天的日期的时间设置为0点0分0秒
      let minDate = new Date(
        today.getFullYear(),
        today.getMonth(),
        today.getDate(),
        0,
        0,
        0
      );
      // 将今天的日期的时间设置为23点59分59秒
      let maxDate = new Date(
        today.getFullYear(),
        today.getMonth(),
        today.getDate(),
        23,
        59,
        59
      );
      let newOption = {
        title: {
          text: "2024-04-07 任务情况"
        },
        legend: {
          data: ["任务时长"],
          // 设置图例组件的布局方向
          orient: "vertical",
          // 设置图例组件的位置
          right: 10,
          top: 20,
          bottom: 20,
          height: "auto",
          type: "scroll"
        },
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            // console.log(params)
            return (
              params.seriesName +
              "<br/>开始时间: " +
              params.data[1] +
              "<br/>结束时间: " +
              params.data[2]
            );
          }
        },
        grid: {
          top: "20%",
          left: "15%",
          right: "30%",
          bottom: "15%",
          containLabel: true
        },
        xAxis: {
          type: "time",
          min: minDate.getTime(), // 设置x轴最小值为今天0点
          max: maxDate.getTime(), // 设置x轴最大值为今天23点59分59秒
          axisLabel: {
            formatter: "{HH}:{mm}:{ss}" // 得到的 label 形如：'2020-12-02'
          }
        },
        yAxis: {
          type: "category",
          data: ["2024-04-07", "2024-04-08", "2024-04-09", "2024-04-10"]
        },
        series: [
          {
            name: "任务时长",
            type: "custom",
            renderItem: function(params, api) {
              let categoryIndex = api.value(0);
              let start = api.coord([api.value(1), categoryIndex]);
              let end = api.coord([api.value(2), categoryIndex]);
              let height = api.size([0, 1])[1] * 0.6;

              return {
                type: "rect",
                shape: echarts.graphic.clipRectByRect(
                  {
                    x: start[0],
                    y: start[1] - height / 2,
                    width: end[0] - start[0],
                    height: height
                  },
                  {
                    x: params.coordSys.x,
                    y: params.coordSys.y,
                    width: params.coordSys.width,
                    height: params.coordSys.height
                  }
                ),
                style: api.style()
              };
            },
            encode: {
              x: [1, 2], // 表示维度 3、1、5 映射到 x 轴。
              y: 0 // 表示维度 2 映射到 y 轴。
            },
            data: [
              // Format: [yAxis index, task start, task end]
              // Example: [0, start hour, end hour]
              [0, "2024-04-08 08:09:10", "2024-04-08 09:09:10"], // Task 1
              [0, "2024-04-08 18:09:10", "2024-04-08 19:09:10"] // Task 1
            ],
            label: {
              show: true,
              position: "insideRight"
            }
          },
          {
            name: "任务时长2",
            type: "custom",
            renderItem: function(params, api) {
              var categoryIndex = api.value(0);
              var start = api.coord([api.value(1), categoryIndex]);
              var end = api.coord([api.value(2), categoryIndex]);
              var height = api.size([0, 1])[1] * 0.6;

              return {
                type: "rect",
                shape: echarts.graphic.clipRectByRect(
                  {
                    x: start[0],
                    y: start[1] - height / 2,
                    width: end[0] - start[0],
                    height: height
                  },
                  {
                    x: params.coordSys.x,
                    y: params.coordSys.y,
                    width: params.coordSys.width,
                    height: params.coordSys.height
                  }
                ),
                style: api.style({ fill: api.value(3) })
              };
            },
            encode: {
              x: [1, 2], // 表示维度 3、1、5 映射到 x 轴。
              y: 0 // 表示维度 2 映射到 y 轴。
            },
            data: [
              // Format: [yAxis index, task start, task end]
              // Example: [0, start hour, end hour]
              [1, "2024-04-08 08:09:10", "2024-04-08 13:14:10", "#0000cd"], // Task 1
              [1, "2024-04-08 18:09:10", "2024-04-08 19:09:10", "#0cd0cd"] // Task 1
            ]
          }
        ],
        dataZoom: [
          {
            type: "slider", // 这是滑块型数据缩放组件
            xAxisIndex: 0, // 表示这个 dataZoom 组件控制着 xAxis 索引为 0 的轴
            start: 0, // 数据窗口范围的起始百分比, 表示一开始展示全部数据
            end: 100,
            filterMode: "weakFilter", // 数据窗口范围的结束百分比,
            labelFormatter: function(value) {
              const date = new Date(value);
              const hours = date.getHours();
              const minutes = date.getMinutes();
              const seconds = date.getSeconds();
              return `${hours}:${minutes}:${seconds}`;
            }
          },
          {
            type: "inside", // 这是内置型数据缩放组件
            xAxisIndex: 0,
            start: 0,
            end: 100,
            filterMode: "weakFilter" // 数据窗口范围的结束百分比
          }
        ]
      };

      this.opt = newOption;
    },
    assembleOption() {
      let newOption = {};
      // 拼装基础样式 title grid
      Object.assign(newOption, {
        title: {
          text: "工况demo",
          left: "center"
        },
        grid: {
          top: "10%",
          left: "5%",
          right: "25%",
          bottom: "10%",
          containLabel: true
        }
      });
      // 设置tooltips
      Object.assign(newOption, {
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            // console.log(params)
            return (
              params.seriesName +
              "<br/>开始时间: " +
              moment(params.data[1]).format("HH:mm:ss") +
              "<br/>结束时间: " +
              moment(params.data[2]).format("HH:mm:ss")
            );
          }
        }
      });

      // 拼装xAxis dataZoom等跟时间相关配置
      let today = moment().format("YYYY-MM-DD"); //'YYYY-MM-DD HH:mm:ss'
      console.log(today); // set to 12:00 am today
      let todayStart = moment()
        .startOf("day")
        .valueOf();
      let todayEnd = moment()
        .endOf("day")
        .valueOf();

      Object.assign(newOption, {
        xAxis: {
          type: "time",
          min: todayStart, // 设置x轴最小值为今天0点
          max: todayEnd, // 设置x轴最大值为今天23点59分59秒
          axisLabel: {
            formatter: "{HH}:{mm}" // "{HH}:{mm}:{ss}"  得到的 label 形如：'2020-12-02'
          }
        },
        dataZoom: [
          {
            type: "slider", // 这是滑块型数据缩放组件
            xAxisIndex: 0, // 表示这个 dataZoom 组件控制着 xAxis 索引为 0 的轴
            start: 0, // 数据窗口范围的起始百分比, 表示一开始展示全部数据
            end: 100,
            filterMode: "weakFilter", // 数据窗口范围的结束百分比,
            labelFormatter: function(value) {
              return moment(value).format("HH:mm:ss");
            }
          },
          {
            type: "inside", // 这是内置型数据缩放组件
            xAxisIndex: 0,
            start: 0,
            end: 100,
            filterMode: "weakFilter" // 数据窗口范围的结束百分比
          }
        ]
      });

      // 设置legend
      let legendList = conditionList.map(item => {
        return item.name;
      });
      Object.assign(newOption, {
        legend: {
          data: legendList,
          // 设置图例组件的布局方向
          orient: "vertical",
          // 设置图例组件的位置
          right: "5%",
          top: "center",
          height: "auto",
          type: "scroll"
        }
      });

      // 拼装yAxis series等跟数据相关配置
      // todo yaxis的data为动态的，需要根据数据动态生成  series的data内的日期的yyyymmdd应替换为今日的日期

      let fakeSeries = [];
      conditionList.forEach(item => {
        let seriesItem = getNewSeriesItem(item.name, item.color);
        fakeSeries.push(seriesItem);
      });
      // console.log(fakeSeries)
      let fakeList = fakeData(150);
      for (let i = 0; i < fakeList.length; i++) {
        fakeSeries[i % fakeSeries.length].data.push([
          getRandomInt(0, 6),
          ...fakeList[i]
        ]);
      }

      Object.assign(newOption, {
        yAxis: {
          type: "category",
          data: [
            "2024-04-07",
            "2024-04-08",
            "2024-04-09",
            "2024-04-10",
            "2024-04-11",
            "2024-04-12",
            "2024-04-13"
          ]
        },
        series: fakeSeries
        // series: [
        //   {
        //     name: legendList[0],
        //     type: "custom",
        //     itemStyle: {
        //       color: "red"
        //     },
        //     renderItem: function(params, api) {
        //       var categoryIndex = api.value(0);
        //       var start = api.coord([api.value(1), categoryIndex]);
        //       var end = api.coord([api.value(2), categoryIndex]);
        //       var height = api.size([0, 1])[1] * 0.6;
        //
        //       return {
        //         type: "rect",
        //         shape: echarts.graphic.clipRectByRect(
        //           {
        //             x: start[0],
        //             y: start[1] - height / 2,
        //             width: end[0] - start[0],
        //             height: height
        //           },
        //           {
        //             x: params.coordSys.x,
        //             y: params.coordSys.y,
        //             width: params.coordSys.width,
        //             height: params.coordSys.height
        //           }
        //         ),
        //         style: api.style()
        //       };
        //     },
        //     encode: {
        //       x: [1, 2], // 表示维度 3、1、5 映射到 x 轴。
        //       y: 0 // 表示维度 2 映射到 y 轴。
        //     },
        //     data: [
        //       // Format: [yAxis index, task start, task end]
        //       // Example: [0, start hour, end hour]
        //       [0, `${today} 08:09:10`, `${today} 09:09:10`], // Task 1
        //       [0, `${today} 18:09:10`, `${today} 19:09:10`] // Task 1
        //     ]
        //   },
        //   {
        //     name: legendList[1],
        //     type: "custom",
        //     itemStyle: {
        //       color: "green"
        //     },
        //     renderItem: function(params, api) {
        //       var categoryIndex = api.value(0);
        //       var start = api.coord([api.value(1), categoryIndex]);
        //       var end = api.coord([api.value(2), categoryIndex]);
        //       var height = api.size([0, 1])[1] * 0.6;
        //
        //       return {
        //         type: "rect",
        //         shape: echarts.graphic.clipRectByRect(
        //           {
        //             x: start[0],
        //             y: start[1] - height / 2,
        //             width: end[0] - start[0],
        //             height: height
        //           },
        //           {
        //             x: params.coordSys.x,
        //             y: params.coordSys.y,
        //             width: params.coordSys.width,
        //             height: params.coordSys.height
        //           }
        //         ),
        //         style: api.style()
        //       };
        //     },
        //     encode: {
        //       x: [1, 2], // 表示维度 3、1、5 映射到 x 轴。
        //       y: 0 // 表示维度 2 映射到 y 轴。
        //     },
        //     data: [
        //       // Format: [yAxis index, task start, task end]
        //       // Example: [0, start hour, end hour]
        //       [1, `${today} 08:09:10`, `${today} 09:09:10`], // Task 1
        //       [1, `${today} 18:09:10`, `${today} 19:09:10`] // Task 1
        //     ]
        //   }
        // ]
      });

      this.opt = newOption;
    }
  },
  mounted() {
    // this.init();
  }
};
</script>

<style scoped></style>
